<template>
  <div class="description">svg文件的三种引入方式：embed、object、iframe</div>
  <ul class="svg_list">
    <li><embed src="/svg/test.svg" type="image/svg+xml" /></li>
    <li><object data="/svg/test.svg" type="image/svg+xml"></object></li>
    <li><iframe src="/svg/test.svg"></iframe></li>
  </ul>
  <div class="description">
    SVG有一些预定义的形状元素，可被开发者使用和操作： 矩形(rect)、
    圆形(circle)、 椭圆(ellipse)、 线(line)、 折线(polyline)、 多边形(polygon)、
    路径(path)
  </div>
  <ul class="svg_list">
    <li>
      <div class="tit">矩形 rect</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect
          x="50"
          y="20"
          width="150"
          height="150"
          style="
            fill: blue;
            stroke: pink;
            stroke-width: 5;
            fill-opacity: 0.1;
            stroke-opacity: 0.9;
          "
        />
      </svg>
    </li>
    <li>
      <div class="tit">圆角矩形 rect</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect
          x="50"
          y="20"
          rx="20"
          ry="20"
          width="150"
          height="150"
          style="fill: red; stroke: black; stroke-width: 5; opacity: 0.5"
        />
      </svg>
    </li>
    <li>
      <div class="tit">椭圆 ellipse</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse
          cx="150"
          cy="80"
          rx="100"
          ry="50"
          style="fill: yellow; stroke: purple; stroke-width: 2"
        />
      </svg>
    </li>
    <li>
      <div class="tit">多个椭圆 ellipse</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="140" cy="100" rx="100" ry="30" style="fill: purple" />
        <ellipse cx="120" cy="70" rx="100" ry="20" style="fill: lime" />
        <ellipse cx="110" cy="45" rx="100" ry="15" style="fill: yellow" />
      </svg>
    </li>
    <li>
      <div class="tit">多个椭圆 ellipse</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="140" cy="50" rx="120" ry="30" style="fill: yellow" />
        <ellipse cx="120" cy="50" rx="90" ry="20" style="fill: white" />
      </svg>
    </li>
    <li>
      <div class="tit">直线 line</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line
          x1="0"
          y1="0"
          x2="200"
          y2="200"
          style="stroke: rgb(255, 0, 0); stroke-width: 2"
        />
      </svg>
    </li>
    <li>
      <div class="tit">多边形 polygon</div>
      <svg height="250" width="500">
        <polygon
          points="220,10 300,210 170,250 123,234"
          style="fill: lime; stroke: purple; stroke-width: 1"
        />
      </svg>
    </li>
    <li>
      <div class="tit">多边形(五角星) polygon</div>
      <svg height="250" width="300">
        <polygon
          points="100,10 40,198 190,78 10,78 160,198"
          style="
            fill: lime;
            stroke: purple;
            stroke-width: 5;
            fill-rule: nonzero;
          "
        />
      </svg>
    </li>
    <li>
      <div class="tit">多边形(五角星) polygon</div>
      <svg height="250" width="300">
        <polygon
          points="100,10 40,198 190,78 10,78 160,198"
          style="
            fill: lime;
            stroke: purple;
            stroke-width: 5;
            fill-rule: evenodd;
          "
        />
      </svg>
    </li>
    <li>
      <div class="tit">多段线 polyline</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline
          points="20,20 40,25 60,40 80,120 120,140 200,180"
          style="fill: none; stroke: black; stroke-width: 3"
        />
      </svg>
    </li>
    <li>
      <div class="tit">多段线 polyline</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline
          points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
          style="fill: white; stroke: red; stroke-width: 4"
        />
      </svg>
    </li>
    <li>
      <div class="tit">路径 path</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <path d="M150 0 L75 200 L225 200 Z" />
      </svg>
    </li>
    <li class="larger">
      <div class="tit">路径 path</div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        height="400"
        width="500"
      >
        <path
          id="lineAB"
          d="M 100 350 l 150 -300"
          stroke="red"
          stroke-width="3"
          fill="none"
        />
        <path
          id="lineBC"
          d="M 250 50 l 150 300"
          stroke="red"
          stroke-width="3"
          fill="none"
        />
        <path
          d="M 175 200 l 150 0"
          stroke="green"
          stroke-width="3"
          fill="none"
        />
        <path
          d="M 100 350 q 150 -300 300 0"
          stroke="blue"
          stroke-width="5"
          fill="none"
        />
        <!-- Mark relevant points -->
        <g stroke="black" stroke-width="3" fill="black">
          <circle id="pointA" cx="100" cy="350" r="3" />
          <circle id="pointB" cx="250" cy="50" r="3" />
          <circle id="pointC" cx="400" cy="350" r="3" />
        </g>
        <!-- Label the points -->
        <g
          font-size="30"
          font="sans-serif"
          fill="black"
          stroke="none"
          text-anchor="middle"
        >
          <text x="100" y="350" dx="-30">A</text>
          <text x="250" y="50" dy="-10">B</text>
          <text x="400" y="350" dx="30">C</text>
        </g>
      </svg>
    </li>
    <li>
      <div class="tit">文本 text</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="0" y="15" fill="red">I love SVG</text>
      </svg>
    </li>
    <li>
      <div class="tit">文本 text</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="0" y="15" fill="red" transform="rotate(30 20,40)">
          I love SVG
        </text>
      </svg>
    </li>
    <li>
      <div class="tit">文本 text</div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <defs>
          <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
        </defs>
        <text x="10" y="100" style="fill: red">
          <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
        </text>
      </svg>
    </li>
    <li>
      <div class="tit">文本 text</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <text x="10" y="20" style="fill: red">
          Several lines:
          <tspan x="10" y="45">First line</tspan>
          <tspan x="10" y="70">Second line</tspan>
        </text>
      </svg>
    </li>
    <li>
      <div class="tit">文本链接 text</div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
          <text x="0" y="15" fill="red">I love SVG</text>
        </a>
      </svg>
    </li>

    <li>
      <div class="tit">多边形渐变边框</div>
      <svg width="64" height="73">
        <defs>
          <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="rgba(16,32,73,0)" />
            <stop offset="50%" stop-color="rgba(8,68,158,0)" />
            <stop offset="80%" stop-color="rgba(6,81,191,0.18)" />
            <stop offset="100%" stop-color="rgba(0,108,255,0.35)" />
          </linearGradient>

          <linearGradient id="linear1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#03ffea" />
            <stop offset="100%" stop-color="#0f8bf1" />
          </linearGradient>
        </defs>
        <polygon
          fill="url(#linear)"
          points="30,1  60,17 60,52 30,69 1,52 1,17"
          stroke="url(#linear1)"
          stroke-width="2"
          class="polygonChange"
        />
      </svg>
    </li>
    <li>
      <div class="tit">标记</div>
      <svg >
        <defs>
          <marker
            id="arrow"
            viewBox="0 0 10 10"
            refX="5"
            refY="5"
            markerWidth="6"
            markerHeight="6"
            orient="auto"
          >
            <path d="M0,0 L10,5 L0,10" />
          </marker>
        </defs>
        <path
          d="M50,50 L200,100"
          marker-start="url(#arrow)"
          marker-end="url(#arrow)"
          color="red" stroke="red"
        />
      </svg>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const value = ref("asd");
const content3d = ref<HTMLElement>();

onMounted(() => {});
</script>

<style lang="scss" scoped>
.svg_list {
  display: flex;
  justify-content: space-between;
  widows: 100%;
  flex-wrap: wrap;

  li {
    .tit {
      text-align: center;
      border: 1px dashed #ddd;
      width: 100%;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
    }

    width: 300px;
    min-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &.larger {
      width: 500px;
    }
    .polygonChange {
      animation: strokeDefaultPoly 3s linear infinite alternate;
    }
    @keyframes strokeDefaultPoly {
      0% {
        stroke-dasharray: 0 50;
      }
      100% {
        stroke-dasharray: 500;
      }
    }
  }
}
</style>
